<template>
    <div class="login-box">
        <!--欢迎页面 -->
        <div class="welcome" v-if="welcome">
            <!-- 倒计时进入登录或者直接跳转到首页 -->
            <van-circle v-model="currentTime"
                layer-color="#F8E6D3"
                color="#8E7E6F"
                style="position: absolute; top: 15px; right: 15px;"
                size="58px"
                :rate="currentTime"
                v-on:click.native="closeWelcome"
                :text="`${time}s`"/>
            <i class="icon">
                <img src="../../images/log/log.png" alt="">
                <span></span>
            </i>
        </div>
        <!-- 登录页面 -->
        <div class="login" v-else>
            <i class="brand">WANGWANG.cn</i>
            <div class="ipt-box">
                <input v-model="loginObj.phone" type="text" placeholder="手机号">
            </div>
            <div class="ipt-box">
                <input v-model="loginObj.code" type="text" placeholder="验证码">
                <span class="btn" @click="getVdtCode">{{vdtText}}</span>
            </div>
            <van-checkbox class="size-color" v-model="remember" checked-color="#C1AB96">记住手机号？</van-checkbox>
            <van-checkbox class="size-color" v-model="auto" checked-color="#C1AB96">7天免登录？</van-checkbox>
            <van-button
                v-on:click.native="loginEvt"
                class="loginbtn"
                color="linear-gradient(to right, #F0D5B8, #C1AB96)"
                :loading="loading"
                :disabled="!/^1[3-9]{1}[0-9]{9}$/.test(loginObj.phone) || loginObj.code.length !== 4"
                block>登录
            </van-button>
            <span class="link" @click="registerEvt">注册新用户？</span>
            <div class="onlogin">
                <div>
                    <van-divider solid :style="{ color: '#C1AB96', borderColor: '#F2F2F2', padding: '0 40px' }">社交账号登录
                    </van-divider>
                </div>
                <div class="logins">
                    <img src="../../images/login/qq.png" alt="">
                    <img src="../../images/login/wechat.png" alt="">
                    <img src="../../images/login/weibo.png" alt="">
                </div>
            </div>
        </div>
        <div class="right">wangwang.cn &copy; 2022-02-22</div>
    </div>
</template>

<script>

// 单个接口引入

export default {
  data () {
    return {
      TimeData: {
        days: 5
      },
      loginObj: {
        phone: '',
        code: ''
      },
      // 是否记住手机号
      remember: false,
      // 是否免登录
      auto: false,
      // 是否关闭广告
      welcome: true,
      // 倒计时秒数
      time: 5,
      currentTime: 100,
      // 欢迎页面定时器
      timer: null,
      // 免登录标识
      // 登录进行中 login、登陆成功 successs、登陆失败 error
      autoFlag: 'success',
      // 节流标识
      vdtText: '获取验证码',
      // 登录的节流标识
      loading: false,
      // 列表数据
      list: []
    }
  },

  async created () {
    // 欢迎页面需要一个倒计时
    this.timer = setInterval(() => {
      if (this.currentTime > 0) {
        this.currentTime -= 1
        this.time = Math.ceil(this.currentTime / 20)
      } else {
        // 倒计时到了，就需要把欢迎页面关闭
        // 关闭倒计时
        clearInterval(this.timer),
        this.timer = null
        // 在生命周期期间获取免登录缓存标识，如果为success直接跳转到首页，如果在倒计时结社之前没有获取到，再关闭广告，进入登录界面
        if (this.autoFlag === 'success') {
          this.$router.push('/home')
        } else {
          // 在倒计时期间，如果没有获取到success就将广告页面关闭
          this.welcome = false
        }
      }
    }, 50)

    // 读取免登录缓存 -- auto-text
    const autoText = localStorage.getItem('auto-text')
    // 如果有缓存则发送自动登录接口
    if (autoText) {
      // 将token数据缓存到vuex中，先缓存再调用接口
      this.$store.commit('common/setToken', autoText)
      // 获取免登录状态
      const result = await autoLoginApi()
      // 如果成功，会返回用户信息
      if (result.code === 200) {
        // 要设置倒计时后的标识
        this.autoFlag = 'success'
        // 缓存用户信息
        this.$store.commit('common/setUserInfo', result.data)
      } else {
        // 设置免登录失败
        this.autoFlag = 'error'
      }
    } else {
      // 读取手机号缓存
      const userPhone = localStorage.getItem('user-phone')

      // 如果手机号存在 -- 给登录数据的phone赋值并且要把记住手机号的标识置为真
      if (userPhone) {
        this.loginObj.phone = userPhone
        this.remember = true
      }
      // 设置免登录失败
      this.autoFlag = 'error'
    }
  },
  methods: {
    closeWelcome () {
      // 判断是否处于免登录   登录进行中 login、登陆成功 successs、登陆失败 error
      console.log('---')
      if (this.autoFlag === 'login') return
      // 清除定时器
      clearInterval(this.timer)
      // 点击时，如果有免登录，直接跳转到首页
      if (this.autoFlag === 'success') {
        this.$router.push('/home')
      } else {
        this.welcome = false
      }
    },
    loginEvt () {
      this.$router.push('/home')
    },
    registerEvt () {
      this.$router.push('/Register')
    },
    getVdtCode () {
      this.$toast.success('获取验证码成功，验证码：1234')
    }
  }
}
</script>

<style lang="less" scoped>
    @import "../../style/common.less";
    .login-box {
        display: block;
        position: relative;
        height: 100%;
        width: 100%;
        .welcome {
            height: 100%;
            width: 100%;
            .icon {
                display: block;
                // position: relative;
                width: 100%;
                height: 100%;
                background: url(../../images/login/background.png) center center / 100% 100% no-repeat;
                font-size: .8rem;
                text-align: center;
                color:#F8E6D3;
                line-height: 900px;
                > img{
                    background: #F8E6D3;
                    border-radius: 18px;
                    color: #C1AB96;
                }
                > span{
                    display: block;
                    position: absolute;
                    top: 62px;
                    left: 50%;
                }
            }
        }
        .login{
            display: block;
            background: url(../../images/login/background.png) center center / 100% 100% no-repeat;
            width: 100%;
            height: 100%;
            padding: 0 25px;
            > .brand {
                line-height: 180px;
                display: block;
                margin: auto;
                margin-left: 0;
                width: 300px;
                height: 180px;
                color: #C1AB96;
                font-size: 30px;
                font-weight: 600;
            }
            > .ipt-box {
                display: flex;
                padding: 10px 0;
                margin-bottom: 16px;
                border-bottom: solid 1px @cdd;
                input {
                    flex: 1;
                    height: 32px;
                    background: transparent;
                    border: none;
                    outline: none;
                    text-indent: 12px;
                    font-size: .9rem;
                    color: #C1AB96;
                    // & 与input是同级样式
                    &::-webkit-input-placeholder {
                        font-size: .75rem;
                        color: @cdd;
                    }
                }
                .size-color{
                    color: #C1AB96;
                    font-size: .75rem;
                }
                .btn {
                    flex: 0 0 126px;
                    // flex设置以后，width是不生效的
                    // width: 150px;
                    border-left: solid 1px @cdd;
                    font-size: .7rem;
                    color: #C1AB96;
                    line-height: 32px;
                    text-align: center;
                }
            }

            .van-checkbox {
                color:#C1AB96;
                margin-bottom: 20px;
                font-size: .75rem;
            }
            .loginbtn{
                width: 100%;
                border-radius: 18px;
            }

            .link {
                display: block;
                margin: 16px 0;
                line-height: 32px;
                font-size: .75rem;
                color: #C1AB96;
                margin-bottom: 120px;
            }
        }
        .onlogin{
            width: 100%;
        }
        .logins{
            display: flex;
            justify-content: space-between;
            width: 300px;
            height: 50px;
            margin: 0 auto;
            margin-bottom: 20px;
            > img{
                background-color: #F8E6D3;
                border-radius: 50%;
                color: #F8E6D3;
                width: 50px;
                height: 50px;
            }
        }

        .right {
            position: absolute;
            left: 0;
            bottom: 16px;
            width: 100%;
            font-size: .65rem;
            color: @cdd;
            text-align: center;
        }
        }
</style>
